<template>
    <div style="width: 100%;height: 100%;overflow: hidden;" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="video-container">
            <!-- <HLSPlayer ref="hlsPlayer" :src="hlsSrc" :autoplay="true" /> -->
            <FLVPlayer :src="flvSrc" :autoplay="true" />
        </div>

        <!-- 添加电池包流程检测div -->
        <div class="battery-process-container">
            <div v-for="item in stepList" :key="item.id">
                <transition name="process-animation" @enter="item.isEntering = true" @after-enter="item.isEntering = false"
                    @leave="item.isExiting = true" @after-leave="handleAfterLeave(item)">
                    <!-- 保持元素存在直到动画完成 -->
                    <div v-show="!item.isExiting" class="process-box" :class="{
                        'enter-active': item.isEntering,
                        'exit-active': item.isExiting
                    }">
                        <div class="process-title">{{ item.text }}</div>
                        <div class="process-steps">
                            <div v-for="step in item.stepList" :key="step.step" class="step-item"
                                :class="{ completed: step.completed }">
                                <div class="step-number">{{ step.step }}</div>
                                <div class="step-line"></div>
                                <div class="step-text">{{ step.text }}</div>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script setup name="Index">
import { ref, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue'
import HLSPlayer from '@/components/HLSPlayer/index.vue';
import FLVPlayer from '@/components/FLVPlayer/index.vue'
const iframeUrl = import.meta.env.VITE_APP_VIDEO_PLAYER
const loading = ref(true)
const isListenerAdded = ref(false)
let iframeDom = null
const ws = ref(null);
const flvSrc = ref("http://110.42.222.175:8080/live/demo.live.flv");
// const flvSrc = ref("http://110.42.222.175:8080/live/test3.live.flv");
const hlsSrc = ref("http://110.42.222.175:8080/live/demo/hls.m3u8");
// const hlsSrc = ref("http://110.42.222.175:8080/live/test.live.flv");
// http://110.42.222.175:8080/live/test.live.flv
// const hlsSrc = ref("http://tlc.gzvst.top/hls/test2/index.m3u8");
const steps1 = ref([
    { id: 1, text: "激光焊点检查", completed: false },
    { id: 2, text: "转接板背面检查", completed: false },
    { id: 3, text: "电池组取出", completed: false },
    { id: 4, text: "点胶机治具装配", completed: false },
    { id: 5, text: "启动按钮确认", completed: false },
    { id: 6, text: "点胶完成取出", completed: false },
    { id: 7, text: "入壳投入治具", completed: false }
]);

const steps2 = ref([
    { id: 1, text: "激光焊点检查", completed: false },
    { id: 2, text: "转接板背面检查", completed: false },
    { id: 3, text: "电池组取出", completed: false },
    { id: 4, text: "点胶机治具装配", completed: false },
    { id: 5, text: "启动按钮确认", completed: false },
    { id: 6, text: "点胶完成取出", completed: false },
    { id: 7, text: "入壳投入治具", completed: false }
]);
// {
//   id:1,// 唯一标识生成
//   text: '步骤名称', // 零件名称
//   isError: false, // 是否异常
//   isCompleted: false, // 是否完成
// stepList: [
//     { step: 1, text: "激光焊点检查", completed: false },
//     { step: 2, text: "转接板背面检查", completed: false },
//     { step: 3, text: "电池组取出", completed: false },
//     { step: 4, text: "点胶机治具装配", completed: false },
//     { step: 5, text: "启动按钮确认", completed: false },
//     { step: 6, text: "点胶完成取出", completed: false },
//     { step: 7, text: "入壳投入治具", completed: false }
//   ]
// }
// 修改stepList为只保留当前展示的零件
// const stepList = ref([
//   {
//     id: 1,
//     text: '零件 202511030001',
//     isError: false,
//     isCompleted: false,
//     steps: [
//       { id: 1, text: "激光焊点检查", completed: false },
//       { id: 2, text: "转接板背面检查", completed: false },
//       { id: 3, text: "电池组取出", completed: false },
//       { id: 4, text: "点胶机治具装配", completed: false },
//       { id: 5, text: "启动按钮确认", completed: false },
//       { id: 6, text: "点胶完成取出", completed: false },
//       { id: 7, text: "入壳投入治具", completed: false }
//     ]
//   }
// ]);
const stepList = ref([]);
if (typeof window !== 'undefined' && window.WebSocket) {
    if (ws.value?.readyState === WebSocket.OPEN) {
        console.log('WebSocket 连接已建立，无需重复连接');
    } else {
        let url = import.meta.env.VITE_APP_SOCKET_API;
        ws.value = new WebSocket(`ws://${url}`);
        stepList.value = []
        ws.value.onmessage = function (event) {
            const data = JSON.parse(event.data);
            console.log('收到消息：', data);
            if (data.data) {
                if (data.data.isCompleted) {
                    // 找到对应item并标记为退出状态（不立即删除）
                    // const targetItem = stepList.value.find(item => item.id === data.data.id);
                    // if (targetItem) {
                    //     targetItem.isExiting = true; // 触发离场动画
                    // }
                    stepList.value = [{ 
                        ...data.data,
                        isExiting: true // 触发进场动画
                    }];
                } else {
                    // 添加新item时标记进入状态
                    stepList.value =[{
                        ...data.data,
                        isEntering: true // 触发进场动画
                    }];
                }
            }
        };
    }
}

// 修改transition事件处理
const handleAfterLeave = (item) => {
    // 动画完成后从列表中移除
    stepList.value = stepList.value.filter(i => i.id !== item.id);
};
// 添加动画状态
const animationState = ref({
    enter: true,
    exit: false
});

// WebSocket模拟
const simulateWebSocket = () => {
    let currentStepIndex = 0;
    let itemCounter = 1;

    const processNextStep = () => {
        if (currentStepIndex < stepList.value[0].steps.length) {
            // 更新当前步骤状态
            stepList.value[0].steps[currentStepIndex].completed = true;
            currentStepIndex++;

            // 检查是否所有步骤完成
            if (currentStepIndex === stepList.value[0].steps.length) {
                stepList.value[0].isCompleted = true;

                // 触发离场动画
                animationState.value.exit = true;

                // 延迟后添加新零件
                setTimeout(() => {
                    // 移除当前零件
                    stepList.value = [];

                    // 短暂延迟后添加新零件
                    setTimeout(() => {
                        itemCounter++;
                        stepList.value.push({
                            id: itemCounter,
                            text: `零件 20251103${itemCounter.toString().padStart(4, '0')}`,
                            isError: false,
                            isCompleted: false,
                            steps: [
                                { id: 1, text: "激光焊点检查", completed: false },
                                { id: 2, text: "转接板背面检查", completed: false },
                                { id: 3, text: "电池组取出", completed: false },
                                { id: 4, text: "点胶机治具装配", completed: false },
                                { id: 5, text: "启动按钮确认", completed: false },
                                { id: 6, text: "点胶完成取出", completed: false },
                                { id: 7, text: "入壳投入治具", completed: false }
                            ]
                        });

                        // 重置动画状态
                        animationState.value = {
                            enter: true,
                            exit: false
                        };

                        // 重置步骤索引
                        currentStepIndex = 0;

                        // 继续处理新零件的步骤
                        setTimeout(processNextStep, 1000);
                    }, 500);
                }, 1000);
                return;
            }
        }

        // 继续处理下一个步骤
        setTimeout(processNextStep, 3000);
    };

    // 开始处理
    processNextStep();
};
//模拟
onMounted(() => {
    loading.value = false;
    // simulateWebSocket();
    // // 第一个流程的步骤自动完成
    // let currentStep = 0;
    // const stepInterval = setInterval(() => {
    //   if (currentStep < steps1.value.length) {
    //     steps1.value[currentStep].completed = true;
    //     currentStep++;
    //   } else {
    //     clearInterval(stepInterval);
    //     activeBox.value = 2; // 切换到第二个流程

    //     // 第二个流程的步骤自动完成
    //     let currentStep2 = 0;
    //     const stepInterval2 = setInterval(() => {
    //       if (currentStep2 < steps2.value.length) {
    //         steps2.value[currentStep2].completed = true;
    //         currentStep2++;
    //       } else {
    //         clearInterval(stepInterval2);
    //       }
    //     }, 5000);
    //   }
    // }, 5000);
})



onUnmounted(() => {

})
</script>
<style scoped lang="scss">
.video-container {
    width: 100%;
    height: 100vh;
}

/* 新增电池包流程样式 */
.battery-process-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    z-index: 10;
    display: flex;
}

.process-box {
    width: 275px;
    height: auto;
    background: rgba(0, 92, 161, 0.92);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px;
    margin-bottom: 20px;
}

.second-box {
    margin-left: 24px;
}

.process-title {
    font-size: 24px;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.process-time {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.step-item {
    display: flex;
    align-items: center;
    position: relative;

}

// 添加动画样式
.process-box {
    transition: all 0.5s ease;
    transform-origin: top center;
}

.process-box.enter-active {
    animation: enterAnimation 0.5s ease-out;
}

.process-box.exit-active {
    animation-name: backOutLeft;
    animation-duration: 3s;
    animation-fill-mode: both;
}

@keyframes enterAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes exitAnimation {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

@keyframes backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: translateX(0px) scale(0.7);
        opacity: 0.7;
    }

    100% {
        transform: translateX(-2000px) scale(0.7);
        opacity: 0.7;
    }
}

.step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    margin-right: 10px;
}

.step-line {
    position: absolute;
    left: 11px;
    top: 24px;
    width: 2px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
}

.step-item:last-child .step-line {
    display: none;
}

.step-text {
    font-size: 16px;
    color: white;
    margin-left: 14px;
}

/* 已完成步骤的样式 */
.step-item.completed .step-number {
    background: #4CAF50;
}

.step-item.completed .step-number::after {
    content: "✓";
    position: absolute;
    color: #FFFFFF;
    font-size: 16px;
}

.step-item.completed .step-number {
    color: transparent;
    /* 隐藏数字但保留空间 */
}
</style>
